<template>
    <div class="box">
        <van-list
  v-model="loading"
  :finished="finished"
  finished-text="没有更多了"
  @load="onLoad"
>
<!-- handClick详情点击 -->
  <van-cell v-for="(item,index) in list" :key="index" @click="handClick(item.id)">
    <div class="listBox">
      <div class="imgBox">
        <img v-lazy="item.picture" alt="">
      </div>

      <div class="tipBox">
       <div class="tipBox1">
          <h1 class="name">{{item.name}}</h1>
       </div>

        <div class="tipBox2">
          <h2 class="price">¥{{item.price}}</h2>
          <span>多款</span>
        </div>
        <div class="tipBox3">
          <span>限时优惠</span>
        </div>
        <div class="tipBox4">
          <span>4299人评价</span>
          <span>99%好评</span>
        </div>
      </div>
    </div>
  </van-cell>
</van-list>
    </div>
</template>

<script>
export default {
  data () {
    return {
      list: [],
      loading: false,
      finished: false
    }
  },
  methods: {
    onLoad () {
      // 异步更新数据
      const value = this.$store.state.searchVal
      setTimeout(() => {
        this.request.get(`/api/search/list?name=${value}`)
          .then((data) => {
            for (let i = 0; i < data.length; i++) {
              this.list.push(data[i])
            }

            // 加载状态结束
            this.loading = false

            // 数据全部加载完成
            if (this.list.length >= data.length) {
              this.finished = true
              console.log(data)
            }
          })
      }, 1000)
    },
    handClick (index) {
      console.log(index)
      // this.$router.push({
      //   path: "/particulars",
      //   query: { id: index },
      // });
      this.$router.push({
        path: '/particulars',
        query: { id: index }
      })
    }
  }

}
</script>

<style scoped>
.box{
  margin-top: 5.5rem;
}
.listBox {
  width: 100%;
  height: 7rem;
}
.imgBox{
  width: 30%;
  height: 7rem;
  float: left;
  background-color: aliceblue;
  position: relative;
  border-radius: 10px;
}
.imgBox img {
  width: 5rem;
  height: 5rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);

}
.tipBox{
  width: 60%;
  height: 7rem;
  float: left;
  margin-left: 1rem;
}
.tipBox1{
  width: 100%;
  height: 40%;
  float: left;
}
.tipBox1 .name{
  font-size: 16px;
  color: black;
}
.tipBox2 .price{
  font-size: 17px;
  color: crimson;
   display: inline-block;
}
.tipBox2 span {
  width: 3.5rem;
  line-height: 1rem;
  text-align: center;
  background-color: rgb(198, 228, 255);
  display: inline-block;
  border-radius: 0.75rem;
  border: 1px solid rgb(37, 139, 255);
  color: cornflowerblue;
  font-size: 12px;
  margin-left: 10px;
}
.tipBox3 span{
  width: 4.5rem;
  line-height: 1rem;
  text-align: center;
  border: 1px solid red;
  color:crimson;
  display: inline-block;
  border-radius: 1rem;
}
.tipBox4 span {
  margin-right: 5px;
}
</style>
